<template>
  <div class="home">
    <div class="content-wrapper">
      <div class="sass-example">
        <p>API Base URL: {{ apiUrl }}</p>
        
        <!-- 路由跳转按钮 -->
        <div class="router-example">
          <h3>Vue Router 示例</h3>
          <el-button @click="goToDemo" type="primary">跳转到 Demo 页面</el-button>
        </div>
        
        <!-- Vuex 用户模块示例 -->
        <!-- <div class="user-example">
          <h3>Vuex 用户模块示例</h3>
          <p>登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}</p>
          <p>用户: {{ userProfile ? userProfile.username : '无' }}</p>
          <div v-if="!isLoggedIn">
            <input v-model="username" placeholder="用户名" />
            <el-button @click="login" type="primary">登录</el-button>
          </div>
          <div v-else>
            <el-button @click="logout" type="danger">登出</el-button>
          </div>
        </div> -->
        
        <!-- Vuex 购物车模块示例 -->
        <!-- <div class="cart-example">
          <h3>Vuex 购物车模块示例</h3>
          <p>购物车商品数量: {{ cartItemCount }}</p>
          <p>购物车总价: ¥{{ cartTotalPrice }}</p>
          <el-button @click="addToCart" type="primary">添加商品</el-button>
          <el-button @click="checkout" type="success">结账</el-button>
          <p v-if="checkoutStatus">结账状态: {{ checkoutStatus }}</p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import request from '../utils/request'

export default {
  name: 'Home',
  data() {
    return {
      apiUrl: import.meta.env.VITE_API_BASE_URL,
      responseData: null,
      username: ''
    }
  },
  computed: {
    // 用户模块状态
    isLoggedIn() {
      return this.$store.state.user.isLoggedIn
    },
    userProfile() {
      return this.$store.state.user.profile
    },
    
    // 购物车模块状态
    cartItemCount() {
      return this.$store.getters['cart/cartItemCount']
    },
    cartTotalPrice() {
      return this.$store.getters['cart/cartTotalPrice']
    },
    checkoutStatus() {
      return this.$store.state.cart.checkoutStatus
    }
  },
  methods: {
    async testRequest() {
      try {
        // 示例请求，实际使用时替换为真实的 API 调用
        // 这里使用一个公开的测试 API
        const response = await request({
          url: 'https://jsonplaceholder.typicode.com/posts/1',
          method: 'get'
        })
        this.responseData = response
        console.log('请求成功:', response)
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    
    // 路由跳转方法
    goToDemo() {
      this.$router.push('/demo')
    },
    
    // 用户模块方法
    async login() {
      if (this.username) {
        try {
          await this.$store.dispatch('user/login', { username: this.username })
          this.username = ''
        } catch (error) {
          console.error('登录失败:', error)
        }
      }
    },
    logout() {
      this.$store.dispatch('user/logout')
    },
    
    // 购物车模块方法
    addToCart() {
      const products = [
        { id: 1, name: '苹果', price: 5 },
        { id: 2, name: '香蕉', price: 3 },
        { id: 3, name: '橙子', price: 4 }
      ]
      const randomProduct = products[Math.floor(Math.random() * products.length)]
      this.$store.dispatch('cart/addToCart', randomProduct)
    },
    async checkout() {
      try {
        await this.$store.dispatch('cart/checkout')
      } catch (error) {
        console.error('结账失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  text-align: center;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: red;
  
  .content-wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    box-sizing: border-box;
  }
  
  // 使用嵌套语法
  .sass-example {
    margin-top: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    
    h2 {
      color: #333;
      margin-top: 0;
    }
    
    h3 {
      color: #42b883;
      margin-top: 20px;
    }
    
    p {
      color: #666;
      font-style: italic;
      
      &:last-child {
        font-weight: bold;
        font-style: normal;
      }
    }
    
    input {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin: 5px;
    }
    
    pre {
      background-color: #eee;
      padding: 10px;
      border-radius: 4px;
      overflow: auto;
      max-height: 200px;
    }
  }
}
</style>